<template>
    <div class="history-main">
        <div class="history-content">
            <div class="chart" ref="lineChart"></div>
            <div class="chart" ref="barChart"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getStationHourData } from '@/api/index'
import moment from 'moment'
import * as echarts from 'echarts'

const tempData = ref([]) // 温度数据
const pressureData = ref([]) // 气压数据
const humidityData = ref([]) // 湿度数据
const timeArr = ref([]) // 时间数据
const lineChart = ref()
const barChart = ref()

const myChart1 = ref(null)
const myChart2 = ref(null)

onMounted(() => {
    getData()
    myChart1.value = echarts.init(lineChart.value)
    myChart2.value = echarts.init(barChart.value)
})


function getData() {
    let endTime = moment().subtract(1, 'hours').format('YYYYMMDDHH')
    let startTime = moment().subtract(12, 'hours').format('YYYYMMDDHH')
    let params = {
        stationNum: '53698',
        startDateTime: startTime,
        endDateTime: endTime
    }
    getStationHourData(params).then(res => {
        let obj = res.data.obj
        let data = obj[params.stationNum]
        tempData.value = data.map(item => {
            return item.TEM
        })
        pressureData.value = data.map(item => {
            return item.PRS
        })
        humidityData.value = data.map(item => {
            return item.RHU
        })

        timeArr.value = data.map(item => {
            return item.Datetime.slice(11,16)
        })
        initChart()
    })
}

defineExpose({ getData })

function initChart() {
    let option1 = {
        title: {
            text: '气温',
            right: '5%',
            textStyle: {
                color: '#FFB518',
                fontSize: 15
            }
        },
        xAxis: {
            type: 'category',
            data: timeArr.value,
            axisLabel: {
                interval: 0
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#FFB518',
                    width: 2
                }
            },
        },
        yAxis: {
            type: 'value',
            name: '单位：℃',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#FFB518',
                    width: 2
                }
            },
            splitLine: {
                show: false
            }
        },
        grid: {
            left: '2%',
            right: '2%',
            top: '15%',
            bottom: '3%',
            containLabel: true
        },
        series: [
            {
                data: tempData.value,
                type: 'line',
                smooth: true,
                symbol: 'none',
                lineStyle: {
                    color: '#FFB518',
                    width: 3
                },
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                        offset: 0,
                        color: "#FFB518",
                        },
                        {
                        offset: 1,
                        color: "rgba(0,0,0,0)",
                        },
                    ]),
                },
            }
        ]
    };

    let option2 = {
        title: {
            text: '湿度',
            right: '5%',
            textStyle: {
                color: '#51F1FF',
                fontSize: 15
            }
        },
        xAxis: {
            type: 'category',
            data: timeArr.value,
            axisLabel: {
                interval: 0
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#51F1FF',
                    width: 2
                }
            },
        },
        yAxis: {
            type: 'value',
            name: '单位：%',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#51F1FF',
                    width: 2
                }
            },
            splitLine: {
                show: false
            }
        },
        grid: {
            left: '2%',
            right: '2%',
            top: '15%',
            bottom: '3%',
            containLabel: true
        },
        series: [
            {
                data: humidityData.value,
                type: 'bar',
                smooth: true,
                symbol: 'none',
                lineStyle: {
                    color: '#51F1FF',
                    width: 3
                },
                barWidth: "20px",
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1, // 渐变方向，从上到下
                        [
                        { offset: 0, color: "#FFB518" },
                        { offset: 1, color: "#51F1FF" },
                        ]
                    ), // 圆角
                },
            }
        ]
    };
    myChart1.value.setOption(option1)
    myChart2.value.setOption(option2)
}

</script>
<style lang="scss" scoped>
.history-main {
    width: 588px;
    height: 533px;
    background: url("@/assets/images/weather/历史数据背景.png");
    display: flex;
    justify-content: center;
    .history-content {
        width: 534px;
        height: 437px;
        margin-top: 70px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .chart {
            width: 100%;
            height: 208px;
        }
    }
}
</style>
